<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>联系人</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请输入联系人' v-model="buyName"  placeholder-class="phcolor"></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>手机号</view>
					</view>
					<view class='cell-item-bd'>
						<input type="text" class='cell-bd-input' placeholder='请输入' v-model="buyMobile"  placeholder-class="phcolor"></input>
					</view>
				</view>

				<view style="margin-top: 10px;">
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>设备类型</view>
						</view>
						<view class='cell-item-bd'>
							<view class='cell-bd-input' v-model="mobile" @tap="handleTap('picker1')" style="color: #c7c7c7;" :style="{color: value2!='请选择' ? styles.fontSmall : styles.fontBig}">{{ value2 }}</view>
						</view>
						<view class='cell-item-ft' style="width: 12px;height: 12px;">
							<image class='cell-ft-next icon' src='/static/images/right_icon.png' @click="showThreePicker" style="width: 100%;height: 100%;"></image>
						</view>
						<lb-picker ref="picker1" v-model="value2" mode="selector" :list="carTypeArr" @change="handleChange" @confirm="handleConfirm"
						 @cancel="handleCancel">
						</lb-picker>
					</view>

					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>设备品牌</view>
						</view>
						<view class='cell-item-bd'>
							<view class='cell-bd-input' v-model="mobile" @tap="handleTap2('picker2')" :style="{color: value3!='请选择' ? styles.fontSmall : styles.fontBig}">{{ value3 }}</view>
						</view>
						<view class='cell-item-ft' style="width: 12px;height: 12px;">
							<image class='cell-ft-next icon' src='/static/images/right_icon.png' @click="showThreePicker2" style="width: 100%;height: 100%;"></image>
						</view>
						<lb-picker ref="picker2" v-model="value3" mode="selector" :list="brandArr" @change="handleChange2" @confirm="handleConfirm2"
						 @cancel="handleCancel2">
						</lb-picker>
					</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>求购价格</view>
						</view>
						<view class='cell-item-bd'>
							<input type="text" class='cell-bd-input' placeholder='请输入' v-model="buyPrice"  placeholder-class="phcolor"></input>
						</view>
						<view style="color: #666666;">万</view>
					</view>
					<view style="padding: 12px 14px 2px 18px;color: #333333;background-color: #fff;">求购说明</view>
					<view class='cell-item cell-item-mid'>
						<view class='cell-item-bd'>
							<textarea maxlength="200" @input="descInput" v-model="buyInfo" rows="1" cols="2" placeholder='请输入' style="height: 100px;font-size: 14px;"  placeholder-class="phcolor">

						</textarea>
						</view>
						<view style="position: absolute; right: 16px; bottom: 10px;">{{txtVal}}<text style="color: #C7C7C7;">/200</text></view>
					</view>

				</view>
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b" @click="saveShip()" hover-class="btn-hover2">一键提交</button>
		</view>
	</view>

</template>

<script>
	import areaPicker from "@/components/area-picker/areaPicker.vue";

	import LbPicker from '@/components/lb-picker'
	export default {
		components: {
			areaPicker,
			LbPicker
		},
		data() {
			return {

				txtVal: 0,
				desc: "",
				styles: {
					fontBig: '#C7C7C7',
					fontSmall: '#333333'
				},
				id: 0,
				name: '',
				mobile: '',
				region: ['北京市', '北京市', '东城区'],
				areaId: 110101,
				address: '',
				is_def: 2,
				multiArray: [
					[],
					[],
					[]
				],
				multiIndex: [110000, 110100, 110101],
				checked: false,
				pickerValue: '',
				defaultIndex: [0, 0, 0],
				submitStatus: false,
				
				buyMobile:"",//手机号
				buyName:"",//联系人
				buyPrice:"",//求购价格
				buyInfo:"",//求购说明
				//
				value2: '请选择',
				carTypeId:"",//类型id
				brandId:"",//品牌id
				value3: '请选择',
				car_type: "", //设备类型
				brand: "", //设备品牌
				
				carTypeArr: [],//设备类型
				brandArr: [],//设备品牌
				userInfo:{}
			}
		},
		computed: {},
		onLoad() {
			this.getcarGettype();
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				this.$api.userInfo({}, res => {
					if (res.status) {
						this.userInfo = res.data;
						this.buyMobile = this.userInfo.mobile
						console.log(this.userInfo)
						}
						})
			},
			//检验剩余多少字
			descInput() {
				this.txtVal = this.buyInfo.length
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(item) {
				console.log('change::', item)
			},
			handleConfirm(item) {
				this.carTypeId = item.index+1;//类型id
				console.log(this.carTypeId+'this.carTypeId')
				console.log('confirm::', item)
			},
			handleCancel(item) {
				console.log('cancel::', item)
			},
			
			
			
			//品牌
			handleTap2(name) {
				this.$refs[name].show()
			},
			handleChange2(item) {
				console.log('change::', item)
			},			
			handleCancel2(item) {
				console.log('cancel::', item)
			},
			handleConfirm2(item) {
				this.brandId = item.item.id;//品牌id
				console.log(this.brandId+'this.brandId');
				console.log('confirm::', item)
			},
			
			// 获取类型
			getcarGettype() {
				this.$api.carGettype({}, res => {
					if (res.status) {
						let car_type = res.data.car_type; //设备类型
						var cartypeArr = car_type.map(item => ({
							id: item.id,
							label: item.name,
							value: item.name
						}))
						this.carTypeArr = cartypeArr;
						
						
						// this.car_type = res.data.car_type; //设备类型
						// let carTypeArr = [];
						// for (let i in this.car_type) {
						// 	carTypeArr.push(this.car_type[i]); //属性
						// }
						// this.carTypeArr = carTypeArr;

						this.brand = res.data.brand; //设备品牌
						var brandArr = this.brand.map(item => ({
							id: item.id,
							label: item.name,
							value:item.name
						}))
						this.brandArr = brandArr;
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			//提交
			saveShip(){
				let res = {};
				if (!this.buyName) {
					this.$common.errorToShow('请输入联系人');
					return false
				} 
				//  if (!this.buyPrice) {
				// 	this.$common.errorToShow('请输入求购价格');
				// 	return false
				// } 
				//  if (this.value2=='请选择') {
				// 	this.$common.errorToShow('请选择设备类型');
				// 	return false
				// } 
				//  if (this.value3 =='请选择') {
				// 	this.$common.errorToShow('请选择设备品牌');
				// 	return false
				// } 
				//  if (!this.buyInfo) {
				// 	this.$common.errorToShow('请输入求购说明');
				// 	return false
				// } 
				
				//组装数据，提交数据--买车
				let data = {
					username: this.buyName, //联系人
					mobile: this.buyMobile,//手机号
					car_type:this.carTypeId,//设备类型
					brand_id:this.brandId,//品牌id
					price:this.buyPrice,//求购价格
					info:this.buyInfo//求购说明
				};
					this.$api.carSavecarbuy(data, res => {
					if (res.status) {
						this.$common.errorToShow('提交成功', function() {
							uni.navigateTo({
								url: 'submittedSuccess'
							});
						});
					} else {
						this.$common.errorToShow(res.msg);
					}
				});
			}
		}

	}
</script>

<style>
	.button-bottom {
		position: inherit !important;
		bottom: 0;
		height: 48px !important;
		width: 100%;
		display: flex;
		z-index: 66;
		box-shadow: none !important;
	}

	.btn-b {
		background-color: #fff !important;
		color: #D62222 !important;
		font-size: 16px;
	}

	.btn-square {
		padding: 0px 20px;
		height: 48px !important;
		line-height: 48px !important;
		min-width: 75px;
		border: none !important;
	}

	.uni-input-placeholder {
		color: #C7C7C7;
	}

	.uni-textarea-placeholder {
		color: #C7C7C7;
	}

	.uni-input-input {
		font-size: 14px !important;
	}

	.user-head {
		height: 100upx;
	}

	.user-head-img {
		height: 90upx;
		width: 90upx;
		border-radius: 50%;
	}

	.cell-hd-title {
		color: #333;
	}

	.cell-item-hd {
		width: 180rpx;
	}

	.cell-item-bd {
		color: #33333;
		width: 100%;
		font-size: 14px;
		margin: 0 !important;
	}

	.button-bottom .btn {
		width: 50%;
	}

	.cell-bd-input {
		width: 100%;
	}

	.right-img .cell-item-ft {
		right: 26rpx;
	}

	/* #ifdef MP-ALIPAY */
	input {
		font-size: 24upx;
	}

	/* #endif */

	.content .btn-b {
		background-color: #D62222 !important;
		color: #fff !important;
		border-radius: 4px;
		margin: 0 16px;
	}

	.content .cell-item {
		padding-left: 18px;
		width: auto;
		margin: 0;
	}

	.content .cell-group {
		background: none;
	}
	.phcolor{
		color: #C7C7C7;
	}
</style>
